<template>
    <view class="xilu">
        <view class="container">
            <!--  -->
            <view class="xilu_classic_list fs32 col89">
                <view :class="classicIndex == index?'active':''" class="xilu_class_item" v-for="(item,index) in classList" @click="changeList(index)">{{item}}</view>
            </view>
            <view class="flex-grow-1">
                <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :fixed="false">
                    <!--  -->
                    <view class="pt30 plr30">
                        <view v-for="(item,index) in productList" class="pb40">
                            <view class="flex-box pb10" >
                                <image :src="item.thumb_image_text" class="xilu_pic" mode="aspectFill"></image>
                                <view class="flex-grow-1">
                                    <view class="m-ellipsis fs30 col10">{{item.name}}</view>
                                    <view class="ptb10 red"><text class="fs24">¥</text>{{item.salesprice}}</view>
                                    <view class="fs24 col89">{{item.scan_num}}人浏览·{{item.want_num}}人想要</view>
                                    <view class="flex-box pt10 flex-end">
                                        <!-- 下架可以编辑 -->
                                        <view class="btn1 mr30" v-if="(item.check_status==2||item.check_status==3)&&item.status==0 && item.sale_out_status==0" @click="bindToggle(index,item)">编辑</view>
                                        <view class="btn4" v-if="item.check_status==2&&item.sale_out_status==0 &&(item.status==0||item.status==2)" @click="bindSaleStatus(index)">{{item.status==2?'下架':'上架'}}</view>
                            
                                        <!-- 待审核 -->
                                        <view class="btn1 mr30" v-if="item.check_status==1" @click="bindDel2(index)">删除</view>
                            
                                        <!-- 已售出 -->
                                        <view class="btn1 mr30" v-if="item.sale_out_status==2" @click="bindCopy(index,item)">复制</view>
                                    </view>
                                </view>
                            </view>
                            <view class="fs24 red" v-if="item.check_status==3">未通过原因：{{item.refuse_reason}}</view>
                        </view>    
                    </view>
                </mescroll-uni>
            </view>
        </view>
        <u-popup :show="editPop" mode="bottom" round="30" closeable closeOnClickOverlay @close="editPop = false">
            <view class="pb50">
                <view class="fs34 col3 fwb tc ptb50">操作</view>
                <view class="edit_btn mt30" @click="bindEdit()">编辑</view>
                <view class="edit_btn mt30" @tap.stop="editPop = false,downPop = true">降价</view>
                <view class="edit_btn mt30" @click="bindDel()">删除</view>
            </view>
        </u-popup>
        <u-popup :show="downPop" mode="bottom" round="30" closeable closeOnClickOverlay @close="downPop = false">
            <view class="pb50">
                <view class="fs34 col3 fwb tc ptb50">降价</view>
                <view class="flex-box input_box plr40">
                    <view class="fs34 col10">¥</view>
                    <input type="number" v-model="price" class="flex-grow-1 pl20 fs30" placeholder-class="cola" placeholder="请输入降价价格">
                </view>
                <view class="btn1 pop" @click="bindPriceSure()">确定提交</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin

        data() {
            return {
                classList: ["在售", "待审核", "未通过", "下架", "已售"],
                classicIndex: 0,
                productList: [],
                chooseIndex: 0,
                chooseProduct: null,
                editPop: false,
                downPop: false,
                price: '',
            };
        },
        methods: {
            changeList(index) {
                this.classicIndex = index;
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                this.$core.get({
                    url: 'xilumarket.product/mylists',
                    loading: false,
                    data: {
                        state: this.classicIndex,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)

                        //设置列表数据
                        if (page.num == 1) this.productList = []; //如果是第一页需手动置空列表
                        this.productList = this.productList.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);


                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })
            },

            //切换
            bindToggle(index, item) {
                this.editPop = true;
                this.chooseIndex = index;
                this.chooseProduct = item;
                //this.price = item.salesprice;
            },
            //编辑
            bindEdit() {
                let page = this;
                let item = this.chooseProduct;
                let product = {
                    id: item.id,
                    name: item.name,
                    category_id: item.category_id,
                    province_id: item.province_id,
                    city_id: item.city_id,
                    region_id: item.region_id,
                    address: item.address,
                    content: item.content,
                    images: item.images_text,
                    salesprice: item.salesprice,
                    line_price: item.line_price,
                    freight_status: item.freight_status,
                    freight_money: item.freight_money
                }
                uni.navigateTo({
                    url: '/pages/public_xianzhi/public_xianzhi',
                    events: {
                        setSuccess: function() {
                            page.mescroll.resetUpScroll()
                        },
                    },
                    success(res) {
                        res.eventChannel.emit('addProductTransfor', product)
                    }
                })
            },
            bindDel2(index) {
                this.chooseIndex = index;
                this.bindDel();
            },
            //删除
            bindDel() {
                let index = this.chooseIndex;
                let productList = this.productList;
                let product = productList[index];
                let page = this;
                uni.showModal({
                    title: '提示',
                    content: "是否删除",
                    success(res) {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilumarket.product/del',
                                loading: false,
                                data: {
                                    product_id: product.id
                                },
                                success: (ret) => {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'none'
                                    })
                                    page.mescroll.resetUpScroll()
                                },
                                fail: () => {

                                }
                            })
                        }
                    }
                })

            },

            //上/下架
            bindSaleStatus(index) {
                let productList = this.productList;
                let product = productList[index];
                let status = product.status == 2 ? 0 : 2;
                let tips = status == 2 ? '是否确认上架' : '是否确认下架';
                let page = this;
                uni.showModal({
                    title: '提示',
                    content: tips,
                    success(res) {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilumarket.product/multi_status',
                                loading: true,
                                data: {
                                    product_id: product.id,
                                    status: status
                                },
                                success: (ret) => {
                                    uni.showToast({
                                        title: ret.data.status == 2 ? '上架成功' : '下架成功',
                                        icon: 'none'
                                    })
                                    page.mescroll.resetUpScroll()
                                },
                                fail: () => {

                                }
                            })
                        }
                    }
                })

            },
            //复制
            bindCopy(index) {
                let productList = this.productList;
                let product = productList[index];
                let page = this;
                uni.showModal({
                    title: '提示',
                    content: '确定复制当前商品',
                    success(res) {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilumarket.product/copy_product',
                                data: {
                                    product_id: product.id
                                },
                                success: (ret) => {
                                    uni.showToast({
                                        title: '复制成功',
                                        icon: 'none'
                                    });
                                    page.changeList(1)
                                },
                                fail: () => {

                                }
                            })
                        }
                    }
                })

            },

            //删除
            bindDel() {
                let index = this.chooseIndex;
                let productList = this.productList;
                let product = productList[index];
                let page = this;
                uni.showModal({
                    title: '提示',
                    content: "是否删除",
                    success(res) {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilumarket.product/del',
                                loading: false,
                                data: {
                                    product_id: product.id
                                },
                                success: (ret) => {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'none'
                                    })
                                    page.mescroll.resetUpScroll()
                                },
                                fail: () => {

                                }
                            })
                        }
                    }
                })

            },

        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            background-color: #f7f9fc;
            height: 100vh;
            display: flex;
            flex-direction: column;
            width: 100vw;
        }

        &_classic_list {
            padding: 30rpx 0;
            width: 100vw;
            overflow-x: scroll;
            white-space: nowrap;

            &::-webkit-scrollbar {
                display: none;
            }

        }

        &_class_item {
            display: inline-block;
            // margin-left: 50rpx;
            width:20%;
            text-align: center;

            &.active {
                font-size: 32rpx;
                color: #101010;
                position: relative;

                &::after {
                    display: block;
                    content: "";
                    width: 31rpx;
                    height: 13rpx;
                    background: url(@/static/icon/index_active.png) no-repeat center;
                    background-size: 100%;
                    position: absolute;
                    bottom: -16rpx;
                    left: 0;
                    right: 0;
                    margin: auto;
                }
            }

            // &:first-child {
            //     margin-left: 30rpx;
            // }

            // &:last-child {
            //     margin-right: 30rpx;
            // }
        }

        &_pic {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
            margin-right: 30rpx;
        }

        .btn1,
        .btn2,
        .btn4 {
            width: 130rpx;
            height: 56rpx;
            line-height: 56rpx;
            font-size: 24rpx;
        }

        .edit_btn {
            width: 650rpx;
            height: 100rpx;
            line-height: 98rpx;
            border-radius: 55rpx;
            border: 1rpx solid #EEEEEE;
            font-size: 34rpx;
            color: #101010;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        .input_box {
            width: 500rpx;
            height: 100rpx;
            background: #F7F9FC;
            border-radius: 55rpx;
            margin: 0 auto 80rpx;
        }

        .btn1.pop {
            width: 650rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: #FFC100;
            border-radius: 40rpx;
            margin: 10rpx auto;
            color: #101010;
            font-size: 30rpx;
        }
    }
</style>